﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>矫正人员月度报表</title>
<head>
<script type="text/javascript"
	src="/static/static_js/jquery-1.9.1.min.js"></script>
<script src="/static/static_js/echarts.common.min.js"></script>
 <script src="/static/www/js/echarts.js"></script>
</head>
	<style type="">
	div{
		margin: 0 auto;
	}
</style>
</head>
<body>
	
	<table width="100%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left"	background="/static/images/b2.jpg">
				<img src="/static/images/b1.jpg" width="10" height="26" />
			</td>
			<td width="68%" background="/static/images/b2.jpg">
				<table width="160" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left">
							<img src="/static/images/tz.gif" width="10" height="16" />
						</td>
						<td width="110" align="left" class="biao">矫正人员月度报表</td>
					</tr>
				</table>
			</td>
			<td width="31%" align="right" background="/static/images/b2.jpg">
				<img src="/static/images/b3.jpg" width="9" height="26" />
			</td>
		</tr>
	</table>
	<div style="height:40px;width:1200px"></div>
	<div id="main" style="height:500px;width:1200px"></div>
	<div><center>矫正人员月度报表-饼状图<br />(年龄情况,文化程度,犯罪类型，男女比例，户籍类型)</center></div>

	

<script type="text/javascript">
	$(function(){
		var name;
		var value;
		$.ajax({
			url:"/echarts/monthView",
			dataType:'json',
			success:function(data){
				name=data.name;
				console.log(name);
				value=data.value;
                console.log(value);
				hh(name,value);//调用生成图表的方法
			}
	
		})

var hh = function(name,value){
    var dataB=[];//空数组，这里是为了让内层数据不直接显示
    var option = {
       /* title : {
            text: '矫正人员数据分析饼图-漏斗图',
            subtext: '纯属虚构',
            x:'center'
        },*/
        tooltip : {//提示框组件
            trigger: 'item',//这里设置触发类型为数据项图形触发
            formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框显示模板设定，饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        },
        legend: {//图例组件
            orient : 'vertical',//垂直分布
            x : 'left',
            data:name
        },
        toolbox: {//工具栏组件
            show : true,
            feature : {//工具配置项
                mark : {show: true},//辅助线开关
                dataView : {show: true, readOnly: false},//数据视图
                magicType : {//动态类型切换
                    show: true,
                    //pie 饼状图 funnel漏斗状图
                    type: ['pie', 'funnel']
                },
                restore : {show: true},//重置
                saveAsImage : {show: true}//保存图片
            }
        },
        calculable : false,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。这个可以不写，默认就是false
        series : [//通用组件，可选则图标类型
            {
                name:'数据分析',
                type:'pie',
                selectedMode: 'single',
                radius : [0, 150],

                //漏斗状图设置
                x: '20%',
                width: '40%',
                funnelAlign: 'right',
                max: 1548,
 
                itemStyle : {
                    normal : {
                        label : {
                            position : 'inner'
                        },
                        labelLine : {
                            show : false
                        }
                    }
                },
                data:[//内圈数据项设定
                    {value:1, name:name[0]},//犯罪类型
                    {value:1, name:name[1]},//男女比例
                    {value:1, name:name[2]},//年龄情况
                    {value:1, name:name[3]},//文化程度
                    {value:1, name:name[4]}//户籍类型
                ]
            },
            {
                name:'数据分析',
                type:'pie',
                radius : [180, 200],

                x: '60%',
                width: '35%',
                funnelAlign: 'left',
                max: 1048,

                data:dataB

            }
        ]
    };
    var data=[];
    //犯罪类型分类
     data[0]=[
         {value:value[0], name:name[5]},
         {value:value[1], name:name[6]},
         {value:value[2], name:name[7]},
         {value:value[3], name:name[8]},
         {value:value[4], name:name[9]},
         {value:value[5], name:name[10]},
         {value:value[6], name:name[11]},
         {value:value[7], name:name[12]}
    ];
     //男女分类
     data[1]=[
 
         {value:value[8], name:name[13]},
         {value:value[9], name:name[14]}

 
    ];
     //年龄分类
    data[2]=[
        {value:value[10], name:name[15]},
        {value:value[11], name:name[16]},
        {value:value[12], name:name[17]}

    ];
    //文化程度
    data[3]=[
        {value:value[13], name:name[18]},
        {value:value[14], name:name[19]},
        {value:value[15], name:name[20]},
        {value:value[16], name:name[21]},
        {value:value[17], name:name[22]}
    ];
    //户籍类型
    data[4]=[
        {value:value[18], name:name[23]},
        {value:value[19], name:name[24]},
        {value:value[20], name:name[25]}
    ];
 
    // 路径配置
    require.config({
        paths: {
            echarts: '/static/www/js'
        }
    });
    var myChart;
    require(['echarts','echarts/chart/pie','echarts/chart/funnel'],function(echarts){
         myChart = echarts.init(document.getElementById('main'));
        // 使用刚指定的配置项和数据显示图表。
 
        myChart.setOption(option);
        // 处理点击事件并且跳转到相应的百度搜索页面
        myChart.on('click', function (params) {
 
            //console.log(params);
 
            if(params.seriesIndex==0){
                for(var i=0;i<option.series[0].data.length;i++){
                    option.series[0].data[i].selected=false;
                }
                var selected=params.data;
                selected.selected=true;
                console.log(selected);
                console.log( option.series[0].data[params.dataIndex]);
                option.series[0].data[params.dataIndex]=selected;
                option.series[1].data=data[params.dataIndex];
                console.log(option);
                myChart.clear();
                myChart.setOption(option);
            }
        });
    });
	}

})



</script>
</body>
</html>